/**
* author:
* date: 2024
* description: 总览
**/
<template>
  <div class="overview-component" v-loading="overviewLoading" element-loading-text="拼命加载中">
    <div class="cover flex">
      <div class="cover-img">
        <video v-if="suffix === 'mp4'" class="w-100 h-100" controls>
          <source :src="form.courseImgUrl">
        </video>
        <img v-else class="w-100 h-100" :src="form.courseImgUrl">
      </div>
      <div class="cover-type">
        <div class="title flex-b-c"><span>{{ form.courseTitle }}</span><span class="flex-c">课程评价（{{ evaluateTotalNum }}）</span></div>
        <div class="types flex">
          <div class="types-item h-100 flex-c">
            <div class="types-inner">
              <div class="">视频课程</div>
              <div class="types-num">{{ form.videosCount || 0 }}</div>
            </div>
          </div>
          <div class="types-item h-100 flex-c">
            <div class="types-inner">
              <div class="">非视频资源</div>
              <div class="types-num">{{ form.unVideosCount || 0 }}</div>
            </div>
          </div>
          <div class="types-item h-100 flex-c">
            <div class="types-inner">
              <div class="">课程资料</div>
              <div class="types-num">{{ form.dataCount || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="class-time">
          <span>课程分类：{{ form.courseType }}</span>
          <span>更新时间：{{ getTime(form.updateTime) }}</span>
        </div>
        <div class="content">
          课程简介：{{ form.courseIntroduction }}
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="introduce-item">
        <div class="what flex"><img src="../../../assets/images/icon_biaoti_24.png">这门课程会讲什么？</div>
        <div class="introduce-content" v-html="form.courseContent"></div>
      </div>
    </div>
    <div class="evaluate">
      <div class="flex-b-c evaluate-text-wrap">
        <div class="flex evaluate-text"><img src="../../../assets/images/icon_pingjia_24.png">课程评价</div>
        <span class="evaluate-num">共{{ evaluateTotalNum }}人评价</span>
      </div>
      <div class="evaluate-list">
        <div class="evaluate-item flex" v-for="(item, i) in evaluateList" :key="i">
          <div class="img"><img src="../../../assets/images/head_img2.png"></div>
          <div class="evaluate-wrap">
            <div class="name-star-time flex-b-c">
              <div class="name-star flex">
                <span>{{ item.reviewerName }}</span>
                <div class="flex">
                  <template v-if="item.starLevel < 5">
                    <img v-for="(ite, n) in item.starLevel" :key="'star' + n" src="../../../assets/images/pic_star1_24.png">
                    <img v-for="(ite, n) in (5 - item.starLevel)" :key="'star1' + n" src="../../../assets/images/pic_star2_24.png">
                  </template>
                  <template v-else>
                    <img v-for="(ite, n) in 5" :key="'star' + n" src="../../../assets/images/pic_star1_24.png">
                  </template>
                </div>
              </div>
              <span class="time">{{ getTime(item.updateTime) }}</span>
            </div>
            <div class="evaluate-content">{{ item.reviewContent }}</div>
          </div>
        </div>
      </div>
      <div v-if="!(sessionData && sessionData.userId)" class="publish flex-c">请先<span @click="toLogin()">登录</span>后发表评论</div>
      <div v-else class="publish-input-wrap">
        <el-input type="textarea" class="publish-input" placeholder="请文明评论，友善发言..." v-model="publish"></el-input>
        <div class="flex-b-c evaluate-btn">
          <div class="flex"><label>星级评价：</label><el-rate v-model="evaluateValue"></el-rate></div>
          <div class="publish-btn flex-c can-click" @click="publishEvaluate">发表评论</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "overview",
    data() {
      let query = this.$route.query;
      return {
        evaluateList: [],
        evaluateTotalNum: 0,
        publish: '',
        evaluateValue: 5,
        courseId: query.id,
        form: {
          courseImgUrl: '',
          courseTitle: '',
          updateTime: '',
          courseIntroduction: '',
          courseContent: '',
        },
        currentPage: 1,
        pageSize: 999,
        sessionData: sessionStorage,
        overviewLoading: false,
        suffix: '',
        badWord: ['妈的', '你妈', '艹', '曹尼玛', '草泥马', '草你妈', '我草', '卧槽', '我曹', '我艹' , '我操', '我糙', '卧草', '屎', '尿'],
      }
    },
    created(){
      // 总览
      this.getOverView();
      // 评价
      this.getCourseEvaluate();
    },
    methods: {
      getOverView(){
        this.overviewLoading = true;
        let param = {
          id: this.courseId,
        };
        this.Request.courseOverviewById(param).then(res=>{
          this.overviewLoading = false;
          this.form = res.data || {};
          if(this.form.courseImgUrl){
            this.suffix = this.getFileExtension(this.form.courseImgUrl);
          }
        })
      },
      getFileExtension(filename) {
        // 使用split分割字符串，并取得最后一个元素（后缀名）
        const extension = filename.split('.').pop();
        // 返回后缀名，如果不存在则返回空字符串
        return extension || '';
      },
      getTime(time){
        return this.$moment(time).format('YYYY-MM-DD HH:mm:ss');
      },
      getCourseEvaluate(){
        let param = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          courseId: this.courseId,
        };
        this.Request.courseEvaluate({params: param}).then(res=>{
          this.evaluateList = res.data || [];
          this.evaluateTotalNum = res.total || 0;
        })
      },
      publishEvaluate(){
        if(!this.publish){
          this.$message.warning('请输入评论');
          return;
        }
        let ifBadWord = false;
        this.badWord.forEach((item)=>{
          if(this.publish.indexOf(item) !== -1){
            ifBadWord = true
          }
        });
        if(ifBadWord){
          this.$message.warning('请文明用语！');
          return
        }
        let param = {
          courseId: this.courseId,
          reviewContent: this.publish,
          starLevel: this.evaluateValue,
          reviewerId: this.sessionData.userId, // 点评人id
          reviewerName: this.sessionData.userName, // 点评人姓名
        };
        this.Request.courseEvaluateAdd({params: param}).then(res=>{
          if(res.status.code === 200){
            this.$message.success('评价成功！');
            this.publish = '';
            this.evaluateValue = 5;
            this.getCourseEvaluate();
          }
        })
      },
      toLogin(){
        this.$router.replace({
          path: '/login'
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../css/module/courseDetail";
</style>
